
<template>
  <el-container class="formDesign">
    <el-main>
      <div class="container-scroll-bar">
        <el-form
          ref="renderForm"
          :label-position="labelPosition"
          :size="size"
          :class="[customClass]"
          class="render-form"
          :label-width="labelWidth"
          :validate-on-rule-change="false"
          :model="formDataModel"
          @submit.native.prevent
        >
          <!--  -->
          <el-row :gutter="formConfig.gridGutter">
            <template v-for="unit in fieldTree">
              <template v-if="typeof unit === 'string'">
                <!-- 输入字段单元 -->
                <component
                  :is="getUnitName(unit)"
                  :key="unit"
                  :field-id="unit"
                  :designer="designer"
                  :form-data="formDataModel"
                />
              </template>
              <template v-else>
                <!-- {{ getUnitName(unit.id) }} -->
                <!-- 容器单元 -->
                <component
                  :is="getUnitName(unit.id)"
                  :key="unit.id"
                  :field-id="unit.id"
                  :children="unit.children"
                  :designer="designer"
                  :form-data="formDataModel"
                />
              </template>
            </template>
          </el-row>
        </el-form>
        <ImportJsonDialog ref="ImportJson" :designer="designer" />
      </div>
    </el-main>
  </el-container>
</template>

<script>
/* eslint-disable vue/require-default-prop */
/* eslint-disable eol-last */
import "Yan/formDesign/components/unit_form/con_unit/index";
import FieldComponents from "Yan/formDesign/components/unit_form/field_unit/index";
import i18n from "Yan/utils/i18n";
import createRender from "Yan/formRender/designRender";
import ImportJsonDialog from "Yan/formDesign/components/toolbar_panel/component/ImportJsonDialog.vue";

export default {
  components: {
    ImportJsonDialog,
    ...FieldComponents,
  },
  mixins: [i18n],
  props: {
    formJson: {
      type: String,
    },
    formData: {
      type: Object,
      default: () => ({}),
    },
  },
  provide() {
    return {
      globalModel: this.formDataModel,
    };
  },
  data() {
    return {
      designer: createRender(this, false, true),
      formDataModel: {},
    };
  },
  computed: {
    fieldLib() {
      return this.designer.fieldLib;
    },
    fieldTree() {
      return this.designer.fieldTree;
    },
    formConfig() {
      return this.designer.formConfig;
    },

    labelPosition() {
      if (!!this.formConfig && !!this.formConfig.labelPosition) {
        return this.formConfig.labelPosition;
      }

      return "left";
    },

    labelWidth() {
      if (!!this.formConfig && !!this.formConfig.labelWidth) {
        return this.formConfig.labelWidth + "px";
      }

      return "80px";
    },

    size() {
      if (!!this.formConfig && !!this.formConfig.size) {
        return this.formConfig.size;
      }

      return "medium";
    },

    customClass() {
      return !!this.formConfig && !!this.formConfig.customClass
        ? this.formConfig.customClass
        : "";
    },
  },
  watch: {
    formJson: {
      handler(n) {
        // console.log("formJson");
        if (this.formJson) this.loadFormJson();
      },
      immediate: true,
    },
    // fieldTree: {
    //   handler(n) {
    //     if (n.length > 0) this.setDefaultFormModel();
    //   },
    // },
    formData: {
      handler(n) {
        // console.log("formData", n);
        this.$set(this, "formDataModel", {
          ...this.formDataModel,
          ...this.formData,
        });
      },
      immediate: true,
      deep: true,
    },
    // formDataModel(n) {
    // console.log("formDataModel", n);
    // },
  },
  created() {},
  mounted() {
    console.log("preview");
  },
  methods: {
    loadFormJson() {
      console.log("loadFormJson");
      this.designer.clearDesigner();
      const importObj = JSON.parse(this.formJson);
      this.designer.loadFormJson(importObj);
    },
    getUnitName(unit) {
      // console.log("getUnitName", this.fieldLib[unit].type + "_unit");
      return this.fieldLib[unit].type + "_unit";
    },
    setDefaultFormModel() {
      console.log("setDefaultFormModel");
      const obj = {};
      const run = (arr) => {
        arr.forEach((i) => {
          const id = typeof i === "string" ? i : i.id;
          if (this.fieldLib[id].group === "field") {
            let newValue = this.fieldLib[i].options.defaultValue || null;
            if (this.fieldLib[id].type === "table") {
              const field = this.fieldLib[i];
              if (field.options.defaultRowValue) {
                // console.log("table rowValue");
                newValue = JSON.parse(field.options.defaultRowValue);
              } else {
                // console.log("table colValue");
                const row = {};
                field.options.tableCols.forEach((o) => {
                  row[o] = this.fieldLib[o].options.defaultValue;
                });
                newValue = [row];
              }
              // console.log("setDefaultValue", newValue);
            } else if (this.fieldLib[id].type === "checkbox") {
              if (!newValue.options.defaultValue) newValue = [];
            }
            obj[id] = newValue;
          } else {
            if (i.children.length !== 0) run(i.children);
          }
        });
      };
      run(this.fieldTree);
      this.$set(this, "formDataModel", { ...obj, ...this.formDataModel });
    },
    submit() {
      this.$refs.renderForm.validate((valid) => {
        if (!valid) return;
        this.$emit("onSubmit", this.formDataModel);
      });
    },
    ButtonClick(value) {
      this.$emit("onButtonClick", value);
    },
  },
};
</script>

<style lang="scss" scoped>
.container-scroll-bar {
  height: 100%;
  position: relative;
  overflow: hidden;
  overflow-y: auto;
  // background-color: #fefdfc;
  &::-webkit-scrollbar {
    display: none;
  }
}
.formDesign {
  height: 100%;
}
.el-main {
  // background-color: #f1f2f3;
  // padding: 20px;
  height: 100%;
}
</style>
